<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui" template="../templates/ui.xhtml">
	<ui:define name="content">
		<script src="http://maps.google.com/maps/api/js?sensor=false"
			type="text/javascript">
			var currentMarker = null;
		</script>
		<p:tabView orientation="left" id="myAccount">
			<p:tab title="My Account">
				<h:form>
					<p:growl id="msg" />
					<p:panel header="My Account">
						<h:panelGrid columns="4" style="width:100%;">
							<h:outputText value="User Name :"
								style="float:right;font-weight:bold;" />
							<h:outputText value="#{myAccount.myAccountDTO.mobileno}" />
							<h:outputText value="E mail :"
								style="float:right;font-weight:bold;" />
							<h:outputText value="#{myAccount.myAccountDTO.email}" />
						</h:panelGrid>
						<p:panel header="Address">
							<h:panelGrid columns="2" style="width:100%;">
								<h:outputLabel value="House No : "
									style="float:right;font-weight:bold;">
									<strong class="ux-labl-required">*</strong>
								</h:outputLabel>
								<h:inputText value="#{myAccount.myAccountDTO.houseno}"
									required="true" style="width:200px;" />
								<h:outputLabel value="Street : "
									style="float:right;font-weight:bold;">
									<strong class="ux-labl-required">*</strong>
								</h:outputLabel>
								<h:inputText value="#{myAccount.myAccountDTO.street}"
									required="true" style="width:200px;" />
								<h:outputLabel value="Area : "
									style="float:right;font-weight:bold;">
									<strong class="ux-labl-required">*</strong>
								</h:outputLabel>
								<h:inputText value="#{myAccount.myAccountDTO.area}"
									required="true" style="width:200px;" />
								<h:outputLabel value="Land Mark : "
									style="float:right;font-weight:bold;">
									<strong class="ux-labl-required">*</strong>
								</h:outputLabel>
								<h:inputText value="#{myAccount.myAccountDTO.landmark}"
									required="true" style="width:200px;" />
								<h:outputLabel value="City : "
									style="float:right;font-weight:bold;">
									<strong class="ux-labl-required">*</strong>
								</h:outputLabel>
								<h:outputLabel value="#{myAccount.myAccountDTO.city}"
									style="width:200px;" />
								<div></div>
								<p:commandButton value="Save" style="width:200px;" update="msg"
									action="#{myAccount.updateDetails }" />
							</h:panelGrid>



						</p:panel>
						<div style="height: 10px;" />
						<p:panel header="Change Password">
							<h:panelGrid columns="2" style="width:100%;">
								<h:outputText value="Current Password :"
									style="float:right;font-weight:bold;" />
								<p:password value="#{registration.password}"
									style="width:200px;" />
								<h:outputText value="New Password :"
									style="float:right;font-weight:bold;" />
								<p:password value="#{registration.password}"
									style="width:200px;" />
								<h:outputText value="Confirm Password :"
									style="float:right;font-weight:bold;" />
								<p:password value="#{registration.confirmPassword}"
									style="width:200px;" />
								<div></div>
								<p:commandButton value="Save" style="width:200px;"
									action="#{registration.updateDetails }" />
							</h:panelGrid>
						</p:panel>
					</p:panel>
				</h:form>
			</p:tab>
			<p:tab title="My Orders">
				<h:form id="myOrders">
					<h:panelGrid id="gridOrders">
						<p:dataTable var="order" value="#{myOrdersManagedBean.orderList}"
							rowKey="#{order.oid}"
							selection="#{myOrdersManagedBean.selectedOrderDTO}"
							selectionMode="single" scrollable="true">
							<p:ajax event="rowSelect" update=":myAccount:myOrders"></p:ajax>
							<p:column headerText="Orderd Date" id="dateOfOrder">
								<h:outputText value="#{order.orderDate}" />
							</p:column>
							<p:column headerText="Order ID">
								<h:outputText value="#{order.oid}" />
							</p:column>
							<p:column headerText="Status" id="columnStatus">
								<h:outputText value="#{order.status}" />
							</p:column>
							<p:column headerText="Amount" id="amount">
								<h:outputText value="#{order.amount}" />
							</p:column>

							<p:column headerText="Delivered Date" id="dateOfDelivery">
								<h:outputText value="#{order.deliveryDate}" />
							</p:column>

						</p:dataTable>

					</h:panelGrid>
					<div class="row status" id="order_status">
						<div class="span8">
							<ul class="status-crumbs clearfix">
								<li
									class="#{(myOrdersManagedBean.selectedOrderDTO.status eq 'Submitted' or myOrdersManagedBean.selectedOrderDTO.status eq 'Read' or myOrdersManagedBean.selectedOrderDTO.status eq 'Packed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Routed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Delivered')? 'complete' : 'pending'}"><strong>Order
										Received</strong> <span class="seperator"></span></li>
								<li
									class="#{(myOrdersManagedBean.selectedOrderDTO.status eq 'Read' or myOrdersManagedBean.selectedOrderDTO.status eq 'Packed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Routed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Delivered') ? 'complete' : 'pending'}"><strong>Order
										Read</strong> <span class="seperator"></span></li>
								<li
									class="#{(myOrdersManagedBean.selectedOrderDTO.status eq 'Packed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Routed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Delivered') ? 'complete' : 'pending'}"><strong>Order
										Packed</strong> <span class="seperator"></span></li>
								<li
									class="#{(myOrdersManagedBean.selectedOrderDTO.status eq 'Routed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Delivered') ? 'complete' : 'pending'}"><strong>Order
										Routed</strong> <span class="seperator"></span></li>
								<li
									class="#{myOrdersManagedBean.selectedOrderDTO.status eq 'Delivered' ? 'complete' : 'pending'}"><strong>Order
										Delivered</strong> <span class="seperator"></span></li>
							</ul>
						</div>
					</div>
					<p:spacer height="25"></p:spacer>
					<p:dataTable var="orderItems"
						value="#{myOrdersManagedBean.selectedOrderDTO.itemsList}"
						scrollable="true" scrollHeight="350">
						<p:column style="width:3%" headerText="Id">
							<h:outputText value="#{orderItems.orderItemId}" />
						</p:column>
						<p:column style="width:30%" headerText="Image">
							<p:graphicImage value="#{orderItems.orderItemImage}" width="50"
								height="50" />
						</p:column>
						<p:column style="width:50%" headerText="Item Name">
							<h:outputText value="#{orderItems.orderItemName}" />
						</p:column>
						<p:column style="width:10%" headerText="Qty">
							<h:outputText value="#{orderItems.orderItemQty}" />
						</p:column>
						<p:column style="width:10%">
							<p:commandButton title="Add to Cart" icon="cart-basket"
								update=":cartForm" action="#{myOrdersManagedBean.addToCart}"
								styleClass="ui-button cart-button">
								<f:setPropertyActionListener value="#{orderItems}"
									target="#{myOrdersManagedBean.selectedItem}" />
							</p:commandButton>
						</p:column>
					</p:dataTable>
					<!--<p:panelGrid style="margin-top:20px;width:100%" id="orderTracker">
						<f:facet name="header">
							<p:row>
								<p:column colspan="5">Order #{myOrdersManagedBean.selectedOrderDTO.oid }</p:column>
							</p:row>
							<p:row>
								<p:column>Submitted</p:column>
								<p:column>Read</p:column>
								<p:column>Packed</p:column>
								<p:column>Routed</p:column>
								<p:column>Delivered</p:column>
							</p:row>
						</f:facet>

						<p:row>
							<p:column colspan="5">
								<p:spacer height="10" />
							</p:column>
						</p:row>

						<p:row>
							<p:column colspan="1" styleClass="ui-widget-header">
							Submitted
						</p:column>
							<p:column colspan="4"></p:column>
						</p:row>

						<p:row
							rendered="#{myOrdersManagedBean.selectedOrderDTO.status eq 'Read' or myOrdersManagedBean.selectedOrderDTO.status eq 'Packed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Routed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Delivered'}">
							<p:column colspan="2" styleClass="ui-widget-header"
								style="text-align: right">
							Read
						</p:column>
							<p:column colspan="3"></p:column>
						</p:row>
						<p:row
							rendered="#{myOrdersManagedBean.selectedOrderDTO.status eq 'Packed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Routed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Delivered'}">
							<p:column colspan="3" styleClass="ui-widget-header"
								style="text-align: right">
							Packed
						</p:column>
							<p:column colspan="2"></p:column>
						</p:row>
						<p:row
							rendered="#{myOrdersManagedBean.selectedOrderDTO.status eq 'Routed' or myOrdersManagedBean.selectedOrderDTO.status eq 'Delivered'}">
							<p:column colspan="4" styleClass="ui-widget-header"
								style="text-align: right">
							Routed
						</p:column>
							<p:column colspan="1"></p:column>
						</p:row>
						<p:row
							rendered="#{myOrdersManagedBean.selectedOrderDTO.status eq 'Delivered'}">
							<p:column colspan="5" styleClass="ui-widget-header"
								style="text-align: right">
							Delivered
						</p:column>
						</p:row>

						<p:row>
							<p:column colspan="5">
								<p:spacer height="10" />
							</p:column>
						</p:row>


						<f:facet name="footer">

							<p:row>
								<p:column colspan="5" style="text-align: right">
               						 Order Status #{myOrdersManagedBean.selectedOrderDTO.status }
          						</p:column>
							</p:row>
						</f:facet>
					</p:panelGrid>

				-->
				</h:form>
			</p:tab>
			<p:tab title="Charts">
				<p:barChart id="barChart"
					value="#{myChartsManagedBean.ordersByDateModel}"
					legendPosition="ne" title="Bar Chart" style="height:300px">
				</p:barChart>
			</p:tab>
			<p:tab title="location On Map">
				<h:form prependId="false">
					<h:panelGrid columns="2">
						<h:outputLabel value="Area :" />
						<h:inputText id="address" value="#{myAccount.address}"
							onchange="geocoder();" />
					</h:panelGrid>
					<p:remoteCommand name="rmtCommandGeocoder" update="messages gmap"
						actionListener="#{myAccount.getCordinates}" />

					<p:growl id="messages" showDetail="true" />
					<p:gmap id="gmap" center="#{myAccount.latLang}" zoom="13"
						type="HYBRID" style="width:600px;height:400px"
						model="#{myAccount.emptyModel}" disableDoubleClickZoom="true"
						onPointClick="handlePointClick(event);" widgetVar="map">
						<p:ajax event="markerDrag" listener="#{myAccount.onMarkerDrag}"
							update="messages" />
						<!--<p:ajax event="pointSelect"
							listener="#{myAccount.pointSelected}" update="messages" />
					--></p:gmap>
					<p:commandButton value="Update" update="messages gmap"
						rendered="#{myAccount.updateFlag}" style="float:right;"
						action="#{myAccount.updateMarker}" />

					<p:dialog widgetVar="dlg" showEffect="fade" header="Confirm"
						closable="false" width="400" height="150">


						<div>
							<h:outputLabel value="Are you sure you want to continue " />
						</div>
						<p:spacer height="50" />
						<h:panelGrid columns="2">

							<p:commandButton value="Add" update="messages gmap"
								style="float:right;" actionListener="#{myAccount.addMarker}"
								oncomplete="markerAddComplete()" />
							<p:commandButton value="Cancel" onclick="return cancel()"
								style="float:right;" />

						</h:panelGrid>

						<h:inputHidden id="lat" value="#{myAccount.lat}" />
						<h:inputHidden id="lng" value="#{myAccount.lng}" />

					</p:dialog>
				</h:form>

				<script type="text/javascript">
					var currentMarker = null;

					function handlePointClick(event) {
						if (currentMarker === null) {
							document.getElementById('myAccount:lat').value = event.latLng
									.lat();
							document.getElementById('myAccount:lng').value = event.latLng
									.lng();

							currentMarker = new google.maps.Marker({
								position : new google.maps.LatLng(event.latLng
										.lat(), event.latLng.lng())
							});

							map.addOverlay(currentMarker);

							dlg.show();
						}
					}
					function markerAddComplete() {
						currentMarker = null;
						dlg.hide();
					}

					function cancel() {
						dlg.hide();
						currentMarker.setMap(null);
						currentMarker = null;

						return false;
					}
					function geocoder() {
						   var geocoder = new google.maps.Geocoder();
						   var address = document.getElementById("myAccount:address").value;
						   geocoder.geocode({
						      'address' : address
						   }, function(results, status) {
						      if (status == google.maps.GeocoderStatus.OK) {
						         // Calls the remoteCommand "rmtCommandGeocoder", 
						         // passing the coordinates to map of parameters
						         rmtCommandGeocoder([ {
						            name : 'latitude',
						            value : results[0].geometry.location.lat()
						         }, {
						            name : 'longitude',
							    value : results[0].geometry.location.lng()
						         }]);
						      }
						   });
						}
											
				</script>

			</p:tab>
		</p:tabView>
	</ui:define>
</ui:composition>